<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
// 相机

// 等组件挂载成功后实例
onMounted(async () => {
  const defaultAccessToken =
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZTU0NzgzYS0xNWNjLTRmZmEtOGQzMi1lY2JmM2IwNzUzMjIiLCJpZCI6MjUwMzcwLCJpYXQiOjE3Mjk3MzU0OTN9.ulTss00xhgzkk6fqIWqBvlIqfO3A0xMEtYUrST9zTL8'

  Cesium.Ion.defaultAccessToken = defaultAccessToken

  // 所有API的开始--控件
  const viewer = new Cesium.Viewer('cesiumContainer', {})
  // 返回笛卡尔坐标
  const point = Cesium.Cartesian3.fromDegrees(110, 20, 20000)

  viewer.camera.setView({
    destination: point,
    // 相机的heading（偏航角-左右摇头）pitch(仰俯角-上下点头)，roll(翻滚角--歪头的动作)
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(0),
      roll: Cesium.Math.toRadians(0),
    },
  })
})
</script>



<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
:deep(.cesium-widget-credits) {
  display: none;
}
</style>
